<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="index::head">

</head>

<body>
    <ul class="layui-nav" th:replace="index::nav">
    </ul>

    <div>
        <div style="text-align: center;background-color: #4191C2;color: white;height: 150px;">
            <h1 style="padding: 50px">考勤</h1>
        </div>
    </div>

    <div class="layui-container" style="text-align: center;margin-top: 70px;">
        <button type="button" class="layui-btn layui-btn-normal" onclick="checkIn()"
            style="font-size: 70px;width: 400px;height: 200px;">上班</button>
        <button type="button" class="layui-btn layui-btn-warm" onclick="checkOut()"
            style="font-size: 70px;width: 400px;height: 200px;">下班</button>
    </div>


</body>
<script>
    function checkIn() {
        $.post('/attendance',{punchType:'上班'},function(data){
            if(data.code===200){
                layer.msg('打卡成功！'); 
            }
        })
    }

    function checkOut() {
        $.post('/attendance',{punchType:'下班'},function(data){
            if(data.code===200){
                layer.msg('打卡成功！'); 
            }
        })
    }
</script>

</html>